<script type="text/javascript" src="<?=site_url()?>js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<?=site_url()?>js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="<?=site_url()?>js/jquery.ui.datepicker-th.js"></script>
<script type='text/javascript' src='<?=site_url()?>js/jquery.bgiframe.min.js'></script>
<link type="text/css" href="<?=site_url()?>js/ui/themes/start/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="<?=site_url()?>js/punvalidate.js"></script>
<style>
.ui-datepicker {
	width: 15em;
}
.ui-widget {
	font-size: 10pt;
}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
	width: 60px;
}
</style>
<script language="javascript">
	$().ready(function() {
		$("#txtDate").datepicker({
			showOn: 'button',
			buttonImage: '<?=site_url()?>images/calbtn.gif',
			buttonImageOnly: true,
			changeMonth: true,
			changeYear: true,
			yearRange: 'c-5:c+5'
		});		
	});

	function trim(stringToTrim) {
		return stringToTrim.replace(/^\s+|\s+$/g,"");
	}

	function handleTransfer(obj) {
		if(obj.value == "อื่นๆ") {		
			document.getElementById('txtTransferOther').style.visibility="visible";
			document.getElementById('txtTransferOther').focus();
		} else {
			document.getElementById('txtTransferOther').style.visibility="hidden";
			document.getElementById('txtTransferOther').value = '';
		}
	}
	function handlePayFor(obj) {
		if(obj.value == "ชำระค่าเรียน") {
			document.getElementById("parForSpan").innerHTML = document.getElementById("subjDiv").innerHTML; 
			document.getElementById('txtPayForOther2').value = '';
			document.getElementById('txtPayForOther2').focus();		
		} else if(obj.value == "ชำระค่าใช้จ่ายอื่นๆ"){
			document.getElementById("parForSpan").innerHTML = document.getElementById("otherDiv").innerHTML; 
			document.getElementById('txtPayForOther1').value = '';
			document.getElementById('txtPayForOther1').focus();
		} else {
			document.getElementById("parForSpan").innerHTML = '';
		}
	}

	function validateForm() {
		if(trim(document.getElementById('txtFirstName').value).length == 0) {
			document.getElementById('txtFirstName').focus();
			alert("กรุณากรอกชื่อ");
			return false;		
		} else if(trim(document.getElementById('txtLastName').value).length == 0) {
			document.getElementById('txtLastName').focus();
			alert("กรุณากรอกนามสกุล");
			return false;		
		} else if(document.getElementById('txtStatus').value == '') {
			alert("กรุณาเลือกสถานภาพ");
			return false;		
		} else if(trim(document.getElementById('txtTel').value).length == 0) {
			document.getElementById('txtTel').focus();
			alert("กรุณากรอกเบอร์โทรศัพท์มือถือ");
			return false;		
		} else if(isTelNo(document.getElementById('txtTel').value) == false) {
			document.getElementById('txtTel').focus();
			alert("รูปแบบเบอร์โทรศัพท์ไม่ถูกต้อง");
			return false;		
		} else if(trim(document.getElementById('txtEmail').value).length == 0) {
			document.getElementById('txtEmail').focus();
			alert("กรุณากรอกอีเมล์");
			return false;
		} else if(isValidEmailAddress(document.getElementById('txtEmail').value) == false) {
			document.getElementById('txtEmail').focus();
			alert("รูปแบบอีเมล์ไม่ถูกต้อง");
			return false;		
		} else if(trim(document.getElementById('txtAmount').value).length == 0) {
			document.getElementById('txtAmount').focus();
			alert("กรุณาระบุจำนวนเงินที่ได้โอนมา");
			return false;
		} else if(isNumeric(document.getElementById('txtAmount').value) == false) {
			document.getElementById('txtAmount').focus();
			alert("รูปแบบจำนวนเงินไม่ถูกต้อง");
			return false;		
		} else if(trim(document.getElementById('txtPayFor').value).length == 0 || (trim(document.getElementById('txtPayForOther1').value).length == 0 && trim(document.getElementById('txtPayForOther2').value).length == 0)) {
			alert("กรุณาระบุจุดประสงค์ของการชำระเงิน");
			return false;		
		} else if(trim(document.getElementById('txtDate').value).length == 0) {
			alert("กรุณาเลือกวันที่โอนเงิน");
			return false;		
		} else if(trim(document.getElementById('txtHr').value).length == 0 || trim(document.getElementById('txtMin').value).length == 0) {
			alert("กรุณาเลือกเวลาที่โอนเงิน");
			return false;		
		} 
		return true;
	}
</script>	
		
<table width="915" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td width="86"><img src="<?=site_url()?>images/payment_14.jpg" width="86" height="1400" alt="" /></td>
        <td width="739" valign="top" bgcolor="#ffffff"><table width="739" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="555" height="126"><img src="<?=site_url()?>images/payment_16.jpg" width="555" height="126" alt="" /></td>
            <td width="183"><img src="<?=site_url()?>images/payment_17.jpg" width="183" height="126" alt="" /></td>
          </tr>
          <tr>
            <td height="65" colspan="2" bgcolor="#FFFFFF"><table width="650" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td><p><span class="style21"><span class="style2">เมื่อน้องๆได้รับการติดต่อกลับจาก<img src="<?=site_url()?>images/buttomaward_19.jpg" width="128" height="23" />ว่าได้คัดเลือกติวเตอร์ที่เหมาะสมกับน้องๆ และยืนยันเวลา  และสถานที่เรียนเรียบร้อยแล้ว น้องๆสามารถชำระเงินได้ด้วยวิธีที่น้องๆสะดวก ดังนี้</span></span><span class="style2"> </span></p></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td height="31" colspan="2" bgcolor="#FFFFFF"><table width="650" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td><p class="style21"><span class="style2">• ค่าเรียนชั่วโมงแรก  ชำระที่สถาบันหรือชำระโดยการโอนเงินเข้าบัญชีที่กำหนดให้ด้านล่าง </span></p></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td height="32" colspan="2"><table width="739" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="196" height="32"><a href="<?=site_url()?>contact.html#map" target="_self" onmouseover="MM_swapImage('Image41','','<?=site_url()?>images/paymentroll_21.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="<?=site_url()?>images/payment_21.jpg" name="Image41" width="196" height="32" border="0" id="Image41" /></a></td>
                <td><img src="<?=site_url()?>images/payment_22.jpg" width="543" height="32" alt="" /></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td height="29" colspan="2" bgcolor="#FFFFFF"><table width="650" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td><p class="style21"><span class="style2">• สำหรับชั่งโมงต่อๆไป  ชำระกับติวเตอร์หลังจากเรียนจบคาบ ครั้งต่อครั้ง</span></p></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td height="45" colspan="2" bgcolor="#FFFFFF"><img src="<?=site_url()?>images/payment_24.jpg" width="739" height="45" alt="" /></td>
          </tr>
          <tr>
            <td height="128" colspan="2" bgcolor="#FFFFFF"><img src="<?=site_url()?>images/payment_25.jpg" width="739" height="128" alt="" /></td>
          </tr>
          <tr>
            <td height="195" colspan="2" bgcolor="#FFFFFF" valign="top">
            	<table width="600" border="0" align="center" cellpadding="1" cellspacing="1" class="style2">
            	  <tr align="center">
		      		<td colspan="2"><b>ธนาคาร</b></td>
		      		<td><b>สาขา</b></td>
		      		<td><b>เลขที่บัญชี </b></td>
		      		<td><b>ชื่อบัญชี </b></td>
		      		<td><b>ประเภทบัญชี</b></td>
	      		</tr>
	              <?php foreach ($account as $a) {?>
			      		<tr>
				      		<td><img height="25px" src="<?=site_url()?>images/bank/<?= $a->bank_logo?>" /> </td>
				      		<td>ธ. <?= $a->bank_name?> </td>
				      		<td><?= $a->bank_branch?>  </td>
				      		<td><?= $a->account_no?>  </td>
				      		<td><?= $a->account_name?>  </td>
				      		<td><?= $a->account_type?> </td>
			      		</tr>
			      	<?php } 
			      	?>
	            </table>
           </td>
           </tr>
          <tr>
            <td height="36" colspan="2" bgcolor="#FFFFFF"><img src="<?=site_url()?>images/payment_27.jpg" width="739" height="36" alt="" /></td>
          </tr>
          <tr>
            <td height="83" colspan="2" bgcolor="#FFFFFF"><img src="<?=site_url()?>images/payment_28.jpg" width="739" height="83" alt="" /></td>
          </tr>
          <tr>
            <td height="52" colspan="2" bgcolor="#FFFFFF"><img src="<?=site_url()?>images/payment_29.jpg" width="739" height="52" alt="" /></td>
          </tr>
          <tr>
            <td colspan="2" bgcolor="#FFFFFF" background="<?=site_url()?>images/payment_30.jpg">
            <form name="myForm" method="post" action="<?=site_url()?>payment/save" enctype="multipart/form-data" onsubmit="return validateForm();" >
            <table  border="0" cellspacing="1" cellpadding="1" align="center" class="styleLabel">
                  <col width="120px" />
                  <col width="*" />
                               
                  <tr>
                    <td align="right"><span class="styleLabel">ชื่อ</span></td>
                    <td align="left"><input name="txtFirstName" type="text" id="txtFirstName" maxlength="45" style="width:120px;"  />
                        <span class="red">*</span>
                        <span class="styleLabel"> นามสกุล </span>
                        <input name="txtLastName" type="text" id="txtLastName" maxlength="45" style="width:120px;" />
                      <span class="red">*</span> <span class="styleLabel">สถานะภาพ
                      <select name="txtStatus" id="txtStatus">
                        <option value="">---โปรดเลือก---</option>
                        <option value="นักเรียน">นักเรียน</option>
                        <option value="ติวเตอร์">ติวเตอร์</option>
                      </select>
                      <span class="red">*</span> </span></td>
                  </tr>
                  <tr>
                    <td align="right"><span class="styleLabel">โทรศัพท์มือถือ</span>                      </td>
                    <td align="left"><input name="txtTel" type="text" id="txtTel" maxlength="20" />
                        <span class="red">*</span></td>
                  </tr>
                  <tr>
                    <td align="right" ><span class="styleLabel">E-mail ที่ใช้สมัคร</span></td>
                    <td align="left"><input name="txtEmail" type="text" id="txtEmail" maxlength="45" />
                      <span class="red">*</span></td>
                  </tr>
                  <tr style="height:30px;">
                    <td align="center" colspan="2">
                    <table width="600px" align="center" style="padding:10px; border:2px solid #FF0000">
                    	<tr> 
                        	<td class="styleLabel" align="center" >สามารถแฟกซ์สำเนาใบโอนเงิน มาที่เบอร์ 0-2884-6706  หรือ upload ใบเสร็จที่ปุ่มด้านล่างก็ได้ค่ะ<br> และอย่าลืมกดส่งข้อมูลด้านล่างสุดนะคะ (ไม่สามารถแนบไฟล์ที่ชื่อเป็นภาษาไทยได้ค่ะ) 
                            </td>
                         </tr>
                    </table>
                    </td>
                  </tr>
                  <tr>
                    <td align="right"><span class="styleLabel">วิธีการโอนเงิน</span></td>
                    <td align="left">
                      <select name="txtTransfer" id="txtTransfer" onchange="handleTransfer(this);">
                        <option value="">---โปรดเลือกวิธีการโอนเงิน---</option>
                        <option value="ATM">ATM</option>
                        <option value="เคาเตอร์ธนาคาร">เคาเตอร์ธนาคาร</option>
                        <option value="ธนาคารอินเทอร์เน็ต">ธนาคารอินเทอร์เน็ต</option>
                        <option value="อื่นๆ">อื่นๆ (โปรดระบุ)</option>
                    </select>
                    <input name="txtTransferOther" type="text" maxlength="100" id="txtTransferOther" value="" style="visibility: hidden;" /></td>
                  </tr>
                  <tr> 
                    <td align="right" valign="top"><span class="styleLabel">โอนเข้าบัญชี<span class="red"> *</span> </span></td>
                    <td align="left" valign="middle">
                    	<?php
                    		$ii = 1;
                    		if(isset($account)) {
	                    		foreach ($account as $a) {
	                    			if($ii == 4)
	                    				echo '<br/>';
	                    			echo ' <input type="radio" ';
	                    			if($ii == 1)
	                    				echo ' checked ';
	                    			echo 'name="radAccount" value="'. $a->account_id . '" />'. '<img height="20px" src="'. site_url() .'/images/bank/'. $a->bank_logo.'" /> ' .$a->account_no;
	                    			$ii++;
	                    			
	                    		}  
                    		}
                    	?>
					</td>
                  </tr>
                  <tr>
                    <td align="right" valign="top"><span class="styleLabel">จำนวนเงิน<span class="red"> *</span> </span></td>
                    <td align="left"><input name="txtAmount" type="text" id="txtAmount" maxlength="7" style="width:60px;" /> <span class="styleLabel">บาท</span>
                     <span class="styleLabel">ชำระค่า</span><span class="red">*</span>
                    <select name="txtPayFor" id="txtPayFor" onchange="handlePayFor(this);">
                      <option value="">---โปรดเลือก---</option>
                      <option value="ชำระค่าเรียน">ชำระค่าเรียน</option>
                      <option value="ชำระค่าใช้จ่ายอื่นๆ">ชำระค่าใช้จ่ายอื่นๆ</option>
                    </select>
                     <span id="parForSpan"></span>
                    </td>
                  </tr>
                  <tr>
                    <td align="right"><span class="styleLabel">วันที่ทำการโอนเงิน<span class="red"> *</span> </span></td>
                    <td align="left"><input name="txtDate" type="text" class="textReadonly" id="txtDate" size="9" readonly="readonly" />
                      </td>
                  </tr>
                  <tr>
                    <td align="right"><span class="styleLabel">เวลาที่ทำการโอนเงิน <span class="red">*</span> </span></td>
                    <td align="left"><select name="txtHr" id="txtHr">
                      <option value="">---โปรดเลือก---</option>
                      <option value="00">00</option>
                      <option value="01">01</option>
                      <option value="02">02</option>
                      <option value="03">03</option>
                      <option value="04">04</option>
                      <option value="05">05</option>
                      <option value="06">06</option>
                      <option value="07">07</option>
                      <option value="08">08</option>
                      <option value="09">09</option>
                      <option value="10">10</option>
                      <option value="11">11</option>
                      <option value="12">12</option>
                      <option value="13">13</option>
                      <option value="14">14</option>
                      <option value="15">15</option>
                      <option value="16">16</option>
                      <option value="17">17</option>
                      <option value="18">18</option>
                      <option value="19">19</option>
                      <option value="20">20</option>
                      <option value="21">21</option>
                      <option value="22">22</option>
                      <option value="23">23</option>
                    </select>
                     : 
                     <select name="txtMin" id="txtMin">
                       <option>---โปรดเลือก---</option>
                       <option value="00">00</option>
                       <option value="01">01</option>
                       <option value="02">02</option>
                       <option value="03">03</option>
                       <option value="04">04</option>
                       <option value="05">05</option>
                       <option value="06">06</option>
                       <option value="07">07</option>
                       <option value="08">08</option>
                       <option value="09">09</option>
                       <option value="10">10</option>
                       <option value="11">11</option>
                       <option value="12">12</option>
                       <option value="13">13</option>
                       <option value="14">14</option>
                       <option value="15">15</option>
                       <option value="16">16</option>
                       <option value="17">17</option>
                       <option value="18">18</option>
                       <option value="19">19</option>
                       <option value="20">20</option>
                       <option value="21">21</option>
                       <option value="22">22</option>
                       <option value="23">23</option>
                       <option value="24">24</option>
                       <option value="25">25</option>
                       <option value="26">26</option>
                       <option value="27">27</option>
                       <option value="28">28</option>
                       <option value="29">29</option>
                       <option value="30">30</option>
                       <option value="31">31</option>
                       <option value="32">32</option>
                       <option value="33">33</option>
                       <option value="34">34</option>
                       <option value="35">35</option>
                       <option value="36">36</option>
                       <option value="37">37</option>
                       <option value="38">38</option>
                       <option value="39">39</option>
                       <option value="40">40</option>
                       <option value="41">41</option>
                       <option value="42">42</option>
                       <option value="43">43</option>
                       <option value="44">44</option>
                       <option value="45">45</option>
                       <option value="46">46</option>
                       <option value="47">47</option>
                       <option value="48">48</option>
                       <option value="49">49</option>
                       <option value="50">50</option>
                       <option value="51">51</option>
                       <option value="52">52</option>
                       <option value="53">53</option>
                       <option value="54">54</option>
                       <option value="55">55</option>
                       <option value="56">56</option>
                       <option value="57">57</option>
                       <option value="58">58</option>
                       <option value="59">59</option>
                      </select></td>
                  </tr>
                  <tr>
                    <td align="right" ><span class="styleLabel">สำเนาใบโอนเเงิน</span></td>
                    <td align="left">
                      <input name="fileUpload" type="file" id="fileUpload" size="25" />
                      <br /></td>
                  </tr>
                  <tr style="vertical-align:top;">
                    <td align="right"><span class="styleLabel">หมายเหตุ</span></td>
                    <td align="left">
                    	เช่น ขอเปลี่ยนข้อมูลส่วนบุคคล <br>
                      <textarea name="txtNote" id="txtNote" cols="40" rows="6"></textarea>                    </td>
                  </tr>
                  <tr style="height: 10px;">
                    <td align="right"></td>
                    <td align="left"></td>
                  </tr>
                  <tr>
                  	<td align="right">&nbsp;</td>
                    <td align="left">
                      <input type="image" src="<?=site_url()?>images/send_btn.jpg" alt="" />                 </td>
                </tr>
                <tr style="height: 10px;">
                    <td align="right"></td>
                    <td align="left"></td>
                  </tr>
              </table></form>
            </td>
          </tr>
          <tr>
            <td height="50" colspan="2" bgcolor="#FFFFFF"><img src="<?=site_url()?>images/payment_31.jpg" width="739" height="50" alt="" /></td>
          </tr>
        </table></td>
        <td width="90"><img src="<?=site_url()?>images/payment_18.jpg" width="90" height="1400" alt="" /></td>
      </tr>
    </table>
<div id="otherDiv" style="display: none;">
	<span id="payForDetail" class="styleLabel" > รายละเอียด </span>
	<input name="txtPayForOther" id="txtPayForOther1" type="text" maxlength="100" />
	<span class="red">*</span>
</div>
<div id="subjDiv" style="display: none;">
	<span id="payForDetail" class="styleLabel" > วิชา </span>
	<input name="txtPayForOther" id="txtPayForOther2" type="text" maxlength="100"  />
	<span class="red">*</span>
</div>